<template>
  <div>
    <div class="con">
      <div class="title">
        <p class="con-title">
          <span>
            <img src="@/assets/img/control/content/Group769.png" />
          </span>
          <span>我的订单</span>
        </p>
      </div>
      <div class="query">
        <el-form ref="queryParamsRef" inline :model="queryParams" label-width="90px">
          <el-form-item label="订单编号" props="sn">
            <el-input v-model="queryParams.sn" placeholder="输入订单编号" clearable />
          </el-form-item>
          <el-form-item label="订单类型" props="shoppingCarEnums">
            <el-select
              v-model="queryParams.shoppingCarEnums"
              placeholder="请选择订单类型"
              clearable
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="querySearch"> 查询 </el-button>
            <el-button type="primary" plain @click="resetQuery">重置 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        v-loading="loading"
        border
        :data="dataList"
        header-cell-class-name="title-style"
      >
        <el-table-column prop="sn" label="订单编号" align="center" />
        <el-table-column prop="carEnums" label="订单类型" align="center">
          <template #default="scope">
            {{ getEnumsLabel(scope.row.shoppingCarEnums) }}
          </template>
        </el-table-column>
        <el-table-column prop="orderAbstract" label="订单摘要" align="center" />
        <el-table-column prop="updatePrice" label="金额(元)" align="center" />
        <el-table-column prop="createTime" label="下单时间" align="center" />
        <el-table-column prop="orderStatus" label="订单状态" align="center">
          <template #default="scope">
            {{ getOrderState(scope.row.orderStatus) }}
          </template>
        </el-table-column>
        <el-table-column label="审核状态" align="center">
          <template #default="scope">
            {{ getExamineState(scope.row.orderStatus) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="handleDetail(scope.row)"> 查看详情 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-footer">
        <el-pagination
          :total="total"
          v-model:current-page="queryParams.params.pageNum"
          v-model:page-size="queryParams.params.pageSize"
          layout="total, prev, pager, next"
          small
          @size-change="getList"
          @current-change="getList"
        />
      </div>
    </div>
    <el-dialog title="详情" v-model="detailShow" width="50%">
      <div v-if="detailRow">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="订单编号">
            {{ detailRow.sn || "无" }}
          </el-descriptions-item>
          <el-descriptions-item label="订单类型">
            {{ getEnumsLabel(detailRow.shoppingCarEnums) }}
          </el-descriptions-item>
          <el-descriptions-item label="金额(元)">
            {{ detailRow.updatePrice || 0 }}
          </el-descriptions-item>
          <el-descriptions-item label="订单状态">
            {{ getOrderState(detailRow.orderStatus) }}
          </el-descriptions-item>
          <el-descriptions-item label="审核状态">
            {{ getExamineState(detailRow.orderStatus) }}
          </el-descriptions-item>
          <el-descriptions-item label="下单时间">
            {{ detailRow.createTime || "无" }}
          </el-descriptions-item>
          <el-descriptions-item label="订单摘要">
            {{ detailRow.orderAbstract || "无" }}
          </el-descriptions-item>
          <el-descriptions-item label="付款截图" v-if="detailRow.paymentVoucherAddress">
            <el-image style="width: 60px; height: 45px" :src="baseUrl + detailRow.paymentVoucherAddress" fit="fill" />
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { itemList } from "@/api/control/order";

const baseUrl = import.meta.env.VITE_BASE_URL;
const total = ref(); // 总条数
const dataList = ref<any>([]); // 数据列表
const loading = ref(false); // 遮罩层
const detailShow = ref(false); // 详情弹窗
const detailRow = ref<any>({}); // 详情内容
const queryParams = ref<any>({
  sn: null,
  shoppingCarEnums: null,
  params: {
    pageNum: 1,
    pageSize: 10,
  },
});
const typeList = ref([
  { value: "CLOUD_SERVER", label: "云服务器" },
  { value: "CLOUD_MARKET", label: "云市场" },
  { value: "GOV_CLOUD", label: "政务云" },
  { value: "CLOUD_SERVER_RENEW", label: "云服务器续费" },
  { value: "CLOUD_SERVER_CHANGE", label: "云服务器变更" },
]);
const stateList = ref([
  { value: "IN_PROGRESS", label: "待审核（已付款）" },
  { value: "FAIL", label: "管理员拒绝" },
  { value: "SUCCESS", label: "管理员同意" },
  { value: "BUY_FAIL", label: "购买失败" },
  { value: "BUYING", label: "正在购买服务器中" },
]);

onMounted(() => {
  getList();
});

// 获取购物车列表
const getList = () => {
  loading.value = true;
  itemList(queryParams.value)
    .then((res: any) => {
      dataList.value = res.rows;
      total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

// 搜索
const querySearch = () => {
  queryParams.value.params.pageNum = 1;
  getList();
};

// 重置
const resetQuery = () => {
  queryParams.value.sn = null;
  queryParams.value.shoppingCarEnums = null;
  queryParams.value.params.pageNum = 1;
  getList();
};

// 获取类型中文名称
const getEnumsLabel = (val: any) => {
  let row = typeList.value.find((i) => i.value == val);
  return row ? row.label : "";
};

// 获取订单状态名称
const getOrderState = (val?: string) => {
  if ("FAIL" === val) {
    return '已退款';
  } else if ("BUY_FAIL" === val) {
    return '未付款';
  } else {
    return '已付款';
  }
};

// 获取审核状态名称
const getExamineState = (val: any) => {
  let row = stateList.value.find((i) => i.value == val);
  return row ? row.label : "";
};

// 查看详情
const handleDetail = (row: any) => {
  detailRow.value = Object.assign({}, row);
  detailShow.value = true;
};
</script>
<style lang="less" scoped>
.con {
  width: 100%;
  height: auto;
  .con-title {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    span:nth-child(1) {
      display: flex;
      align-items: center;
      img {
        width: 14px;
        height: 14px;
      }
    }
    span:nth-child(2) {
      display: flex;
      align-items: center;
      margin-left: 10px;
      font-size: 16px;
    }
  }
  .query {
    width: 100%;
    height: 50px;
    margin: 20px 0;
    display: flex;
  }
  .page-footer {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
  }
}
</style>
<style>
.title-style {
  height: 60px;
  background-color: #f6faff !important;
}
</style>
